<template>
	<div class="tinymce-box">
		<TEditor :id="editId" v-model="content" :init="init" tag-name="div" :disabled="disabled" @onClick="onClick" />
	</div>
	<PictureSelectorDialog v-model="isShowPicSelector" @submit="getPic" />
	<VideoSelectorDialog v-model="isShowVideoSelector" @submit="getVideo" />
	<AttachmentSelectorDialog v-model="isShowFileSelector" @submit="getFile" />
</template>

<script>
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import VideoSelectorDialog from '/@/components/videoSelector/VideoSelectorDialog.vue';
import AttachmentSelectorDialog from '/@/components/attachmentSelector/AttachmentSelectorDialog.vue';

//引入tinymce编辑器
import TEditor from '@tinymce/tinymce-vue';

//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from 'tinymce/tinymce'; //tinymce默认hidden，不引入则不显示编辑器
import 'tinymce/themes/silver'; //编辑器主题，不引入则报错
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件
import 'tinymce/plugins/advlist'; //高级列表
import 'tinymce/plugins/anchor'; //锚点
import 'tinymce/plugins/autolink'; //自动链接
import 'tinymce/plugins/autoresize'; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'; //自动存稿
import 'tinymce/plugins/charmap'; //特殊字符
import 'tinymce/plugins/code'; //编辑源码
import 'tinymce/plugins/codesample'; //代码示例
import 'tinymce/plugins/directionality'; //文字方向
import 'tinymce/plugins/emoticons'; //表情
import 'tinymce/plugins/fullpage'; //文档属性
import 'tinymce/plugins/fullscreen'; //全屏
import 'tinymce/plugins/help'; //帮助
import 'tinymce/plugins/hr'; //水平分割线
import 'tinymce/plugins/image'; //插入编辑图片
import 'tinymce/plugins/importcss'; //引入css
import 'tinymce/plugins/insertdatetime'; //插入日期时间
import 'tinymce/plugins/link'; //超链接
import 'tinymce/plugins/lists'; //列表插件
import 'tinymce/plugins/media'; //插入编辑媒体
import 'tinymce/plugins/nonbreaking'; //插入不间断空格
import 'tinymce/plugins/pagebreak'; //插入分页符
import 'tinymce/plugins/paste'; //粘贴插件
import 'tinymce/plugins/preview'; //预览
import 'tinymce/plugins/print'; //打印
import 'tinymce/plugins/quickbars'; //快速工具栏
import 'tinymce/plugins/save'; //保存
import 'tinymce/plugins/searchreplace'; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import 'tinymce/plugins/tabfocus'; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import 'tinymce/plugins/table'; //表格
import 'tinymce/plugins/template'; //内容模板
import 'tinymce/plugins/textcolor'; //文字颜色
import 'tinymce/plugins/textpattern'; //快速排版
import 'tinymce/plugins/toc'; //目录生成器
import 'tinymce/plugins/visualblocks'; //显示元素范围
import 'tinymce/plugins/visualchars'; //显示不可见字符
import 'tinymce/plugins/wordcount'; //字数统计

import { menuConfig, themeConfig, fontConfig, toolbarConfig, pluginsConfig, otherConfig } from './config';
import { useUpload, useEvent } from './hook';
export default {
	name: 'Editor',
	components: {
		TEditor,
		PictureSelectorDialog,
		VideoSelectorDialog,
		AttachmentSelectorDialog,
	},
	props: {
		modelValue: {
			type: String,
			default: '',
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		plugins: {
			type: [String, Array],
			default: '',
		},
		toolbar: {
			type: [String, Array],
			default: '',
		},
		height: {
			type: Number,
			default: 500,
		},
		editId: {
			type: String,
			default: 'default',
		},
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		const init = {
			...menuConfig,
			...themeConfig,
			...fontConfig,
			...toolbarConfig, //工具栏配置，设为false则隐藏
			...pluginsConfig, //插件配置
			...otherConfig,
			height: props.height, //注：引入autoresize插件时，此属性失效
			file_picker_callback: async function (callback, value, meta) {
				if (meta.filetype == 'file') {
					// callback("mypage.html", { text: "My text" });
					// console.error("文件类型错误！");
					isShowFileSelector.value = true;
					eventObj.getFileSrc = function (src, text) {
						callback(src, { text });
					};
				}
				// Provide image and alt text for the image dialog
				if (meta.filetype == 'image') {
					isShowPicSelector.value = true;
					eventObj.getPicSrc = function (src) {
						callback(src);
					};
				}
				// Provide alternative source and posted for the media dialog
				if (meta.filetype == 'media') {
					isShowVideoSelector.value = true;
					eventObj.getVideoSrc = function (src) {
						callback(src);
					};
				}
			},
			video_template_callback: function (data) {
				return `<video width="${data.width}" height="${data.height}" poster="${data.poster ? data.poster : ''}"  preload="auto" controls="controls">
                        <source src="${data.source}#t=0.1" />
                    </video>
                    `;
			},
			image_uploadtab: false, //隐藏默认的上传图片tab
		};
		tinymce.init; // 初始化

		const setEditMode = (type) => {
			tinymce.editors[props.editId].setMode(type); //开启只读模式
		};
		const content = computed({
			get() {
				return props.modelValue;
			},
			set(val) {
				emit('update:modelValue', val);
			},
		});
		const { eventObj, isShowPicSelector, isShowVideoSelector, isShowFileSelector, getPic, getVideo, getFile } = useUpload();
		const { onClick, clear } = useEvent(tinymce, emit, content);
		return {
			isShowPicSelector,
			isShowVideoSelector,
			isShowFileSelector,
			getPic,
			getVideo,
			getFile,
			content,
			init,
			onClick,
			clear,
			setEditMode,
		};
	},
};
</script>

<style lang="scss">
.tinymce-box {
}
.tox-tinymce-aux {
	z-index: 3999 !important;
}
</style>
